<template>

    <h1>{{ fullName }}</h1>
    <input type="text" v-model="name.firstName">
    <button @click="changInfo">修改</button>
</template>

<script>

import {ref, reactive, computed} from "vue";

const {watch, watchEffect} = require("vue");

export default {
    name: 'App',

    setup() {
        let name = reactive({
            firstName: "张",
            lastName: "三"
        })

        let fullName = ref("")

        // 监视--监视指定的数据
        //deep 对象里面有属性，属性里面有对象，对象里面有属性，属性里面有对象， 深度监视
        // immediate默认执行一次
        watch(name, ({firstName, lastName}) => {
            fullName.value = firstName + "_" + lastName
            console.log("neirongxiugai")
        }, { deep: true})

        // 监视，不需要配置immediate，本身默认就会进行监视，默认执行一次
        watchEffect(() => {
            fullName.value = name.firstName + "_" + name.lastName
            console.log("Df")
        })


        // 方法
        function changInfo() {

        }

        return {
            fullName, changInfo,name
        }
    }
}
</script>

<style>

</style>
